<template>
  <div class="app-container">
    <el-card>
      <Toolbar category :category-list="categoryList" agent :agent-list="agentList" @use="useFilter">
        <template #left>
          <el-button type="primary" size="small" @click="addProperty">添加房产</el-button>
        </template>
      </Toolbar>
      <el-divider />
      <el-table
        :data="propertiesTable"
        border
        height="calc(100vh - 270px)"
      >
        <el-table-column label="封面">
          <template #default="{row}">
            <el-image
              v-if="row.image"
              style="object-fit: cover;"
              :src="row.image"
              :preview-src-list="[row.image]"
            />
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" />
        <el-table-column prop="tags" label="标签">
          <template #default="{row}">
            <el-tag v-for="tag in row.tags" :key="tag" size="mini" style="margin:0 3px">{{ tag }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="地址" />
        <el-table-column label="分类">
          <template #default="{row}">
            {{ row.category&&row.category.title ? row.category.title : '无' }}
          </template>
        </el-table-column>
        <el-table-column label="经纪">
          <template #default="{row}">
            {{ row.agent&&row.agent.name ? row.agent.name : '无' }}
          </template>
        </el-table-column>
        <el-table-column prop="price" label="价格" width="80" />
        <el-table-column prop="desc" label="介绍" />
        <el-table-column label="图片" width="100">
          <template #default="{row}">
            <el-image
              v-for="(imgurl, index) in row.photos"
              :key="index"
              style="width: 80px; object-fit: contain;"
              :src="imgurl"
              :preview-src-list="row.photos"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="80">
          <template #default="{row}">
            <el-row>
              <el-col>
                <el-button type="primary" size="small" @click="editProperty(row.id)">编辑</el-button>
              </el-col>
              <el-col>
                <el-button type="danger" size="small" @click="delProperty(row.id)">删除</el-button>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <paginationAlt
        :total="totalPage"
        :config="pageConfig"
        @current-change="onPageChange"
        @size-change="onSizeChange"
      />
    </el-card>
    <propDialog
      ref="propDialog"
      :visible.sync="showingDialog"
      :agent-list="agentList"
      :category-list="categoryList"
      :is-edit="isEdit"
      @reload="onReload"
    />
  </div>
</template>

<script>
import Toolbar from '@/components/Toolbar'
import { getProperties, deleteProperty } from '@/api/realEstate'
import { getAgent } from '@/api/agent'
import { getCategory } from '@/api/category'
import propDialog from '../realEstate/components/prop_dialog.vue'
// import propDialog from './components/prop_dialog.vue'
export default {
  components: {
    Toolbar,
    propDialog
  },
  data() {
    return {
      propertiesTable: [],
      agentList: [],
      categoryList: [],
      filter: {},
      showingDialog: false,
      isEdit: false,
      pageConfig: {
        _start: 0,
        _limit: 2
      },
      totalPage: 0
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    async loadData() {
      // 第一次请求：得到total page
      const res1 = await getProperties(this.filter)
      this.totalPage = res1.data.length
      // 第二次请求：获取并将数据存入data
      const { data: properties_data } = await getProperties({
        ...this.filter,
        ...this.pageConfig
      })
      this.propertiesTable = properties_data
      console.log('loading properties:', this.propertiesTable)
      // 请求经纪列表供筛选条和dialog使用
      const { data: agent_data } = await getAgent()
      this.agentList = agent_data
      console.log('loading agents:', this.agentList)
      // 请求分类列表供筛选条和dialog使用
      const { data: cate_data } = await getCategory()
      this.categoryList = cate_data
      console.log('category list:', this.categoryList)
    },
    useFilter(filter) {
      this.filter = filter
      this.pageConfig._start = 0
      this.loadData()
      this.$message.success('筛选结果更新')
    },
    addProperty() {
      console.log('opening addProperty dialog...')
      this.isEdit = false
      this.showingDialog = true
      this.$refs.propDialog.initForm()
    },
    editProperty(id) {
      console.log('opening editProperty dialog... id=' + id)
      this.isEdit = true
      this.$refs.propDialog.echo(id)
      this.showingDialog = true
    },
    async delProperty(id) {
      await this.$confirm('确定要删除吗?')
      await deleteProperty(id)
      this.$message.success('删除成功')
      if (this.totalPage % this.pageConfig._limit === 1) this.pageConfig._start = this.pageConfig._start - this.pageConfig._limit
      this.loadData()
    },
    onPageChange(page) {
      console.log('going to page ' + page)
      this.pageConfig._start = (page - 1) * this.pageConfig._limit
      this.loadData()
    },
    onSizeChange(size) {
      console.log('setting page size to ' + size)
      this.pageConfig._limit = size
      this.loadData()
    },
    onReload() {
      this.loadData()
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 3px;
}
.scroll-x {
    overflow-x:scroll;
    &::-webkit-scrollbar {
        height: 4px;
    }
    &::-webkit-scrollbar-thumb {
        background-color: #ddd;
        border-radius: 2px;
    }
}
</style>
